<template>
  <div>
    <el-card>
      <template #header>
        <el-input
          class="search-input"
          placeholder="请输入查询关键字"
          size="normal"
          clearable
        >
          <template #append>
            <el-button icon="el-icon-search"></el-button>
          </template>
        </el-input>
        <el-button type="primary">添加新用户</el-button>
      </template>
      <el-table :data="users" border height="scorll" size="small">
        <template v-slot:empty>
          <el-empty description="查无数据"></el-empty>
        </template>
        <el-table-column
          label="#"
          type="index"
          align="center"
        ></el-table-column>
        <el-table-column prop="username" label="用户名"> </el-table-column>
        <el-table-column prop="email" label="邮箱"> </el-table-column>
        <el-table-column prop="mobile" label="电话"> </el-table-column>
        <el-table-column prop="role_name" label="角色"> </el-table-column>
        <el-table-column label="状态">
          <template #default="{ row }">
            <el-switch v-model="row.mg_state" @change="changeUserState(row,$event)"></el-switch>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="180">
          <template #default="{ row }">
            <el-button type="primary" icon="el-icon-edit" size="mini"></el-button>
            <el-button type="danger" icon="el-icon-delete" size="mini"></el-button>
            <el-button type="warning" icon="el-icon-setting" size="mini" @click="openUserEdit(row)"></el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        background
        layout="total, sizes, prev, pager, next, jumper"
        :page-sizes="[5, 10, 15, 20, 25, 30]"
        :page-size="100"
        :total="400"
      >
      </el-pagination>
    </el-card>

  <!-- 权限分配 -->
  <el-dialog title="账号角色分配" :visible.sync="flag" :close-on-click-modal="false">
    <!-- 内容-star -->
    <el-form label-width="80px">
      <el-form-item label="当前用户">
        <el-input readonly :value="editUser.username"></el-input>
      </el-form-item>
      <el-form-item label="当前权限">
        <el-input readonly :value="editUser.role_name"></el-input>
      </el-form-item>
      <el-form-item label="新权限">
        <el-select placeholder="选择新权限" value="" style="width:100%">
          <el-option label="区域一" value="shanghai"></el-option>
          <el-option label="区域二" value="beijing"></el-option>
        </el-select>
      </el-form-item>
    </el-form>
    <!-- 内容-end -->
    <template #footer>
      <el-button @click="flag=false">取 消</el-button>
      <el-button type="primary">确 定</el-button>
    </template>
  </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      users: [],
      flag:false,
      editUser:{
        username:"",
        role_name:""
      }
    };
  },
  methods:{
    openUserEdit(u){
      this.editUser= u;
      this.flag = true
    },


    async loadUserList(){
      let result = await this.$api.getUserList({
        pagenum:1,
        pagesize:40
      })
      // console.log(result);
      this.users = result.users
    },
    async changeUserState(user,nv){
      console.log(user,nv);
      let result = await this.$api.changeUserState({ uid:user.id,type:nv })
      if(result){
        this.$notify({
          title: `"${user.username}"账号已${ nv?"开启":"禁用" }`,
          type: nv?'success':'warning'
        });
        // this.$message.success(`${user.username} 账号 ${ nv?'开启':'禁用' } 成功`)
      }else{
        user.mg_state = !nv;
      }
      console.log(result);
    }
  },
  created(){
    this.loadUserList();
  }
};
</script>

<style lang="less" scoped>
.el-card {
  height: 100%;
  display: flex;
  flex-flow: column nowrap;
  :deep(.el-card__body) {
    flex-grow: 1;
    padding-bottom: 70px;
    overflow: hidden;
  }
}
// :deep(.el-table__body-wrapper){
//   height: 100%!important;
// }
.el-table{
  height: 100%;
}
.search-input {
  width: 400px;
  margin-right: 20px;
}
.el-pagination {
  padding: 20px;
  text-align: center;
}
</style>